<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../img/logo.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        .login_nav {
            margin: 80px 0 20px;
            width: 500px;
            display: flex;
            flex-wrap: nowrap;
        }
        
        .login_nav input {
            width: 250px;
            height: 30px;
            border: 0;
            background-color: transparent;
            outline: none;
            font-weight: bolder;
            font-size: 20px;
        }
        
        .phoneNum_form {
            width: 500px;
            display: flex;
            flex-wrap: wrap;
            line-height: 75px;
            display: none;
        }
        
        .phoneNum_form input {
            width: 500px;
            height: 46px;
        }
        
        .forget_pwd {
            line-height: 40px;
        }
        
        .forget_pwd a {
            height: 10px;
            font-size: 15px;
        }
        
        .phoneNum_form p {
            width: 500px;
            text-align: right;
        }
        
        .phoneNum_form p a {
            color: rgb(17, 70, 134);
        }
        
        .phoneNum_form ._button {
            width: 250px;
            height: 46px;
            border: 0;
            color: white;
        }
        
        #login_button {
            background-color: rgb(197, 19, 51);
        }
        
        #sign_button {
            background-color: #000;
        }
        
        .codeNum_form {
            width: 500px;
            display: flex;
            flex-wrap: wrap;
            line-height: 75px;
        }
        
        .codeNum_form input {
            width: 500px;
            height: 45px;
        }
    </style>
</head>

<body>
    <header></header>
    <section>
        <div class="login_nav">
            <input type="button" value="用户名登录"></input>
            <input type="button" value="手机快捷登录"></input>
        </div>

        <div class="phoneNum_form">
            <form action="">
                <input type="text" placeholder="请填写手机号或用户">
                <input type="text" placeholder="请填写手机号或用户">
                <p class="forget_pwd"><a href="sign.html">忘记密码</a></p>
                <p><input type="button" class="_button" id="login_button" value="登录"><input class="_button" id="sign_button" type="button" value="注册"></p>
            </form>
        </div>
        <div class="codeNum_form">
            <form action="">
                <input type="text" placeholder="手机号">
                <input type="text" placeholder="图形验证码">
                <input type="text" placeholder="短信验证码"><button>获取验证码</button></form>


        </div>
    </section>
    <footer></footer>
</body>

</html>
<script src="jQuery.js">
</script>
<script>
    $("header").load("header.html");

    $("footer").load("footer.html");
</script>